<template>
  <div class="cont-wrapper nva_menu_container">
    <div class="menu_container wst">
      <!-- <navMenu title="机构管理" :list="list"></navMenu> -->
      <contSidebar name="机构管理" :activeItem="activeItem" :siderList="list" @handleAcitve="handleAcitve"></contSidebar>
    </div>
    <div class="block-container container">
      <p style="height: 18px;line-height: 16px;" class="title">机构管理</p>
      <div class="info-search">
        <label for="">
          学校名称:
          <input type="text" v-model="search" class="search-input">
        </label>
        <a href="javascript:;" class="save" style="margin-top:13px" @click="searchResult">搜索</a>
      </div>

      <div class="school-container">
        <p>
          {{areaName}}
        </p>
      </div>
      <div class="school-list clearfix">
          <el-col :span="4" v-for="(s,i) in schoolList" :key="i">
            <div class="item">
              <p>{{s.areaName}}</p>
              <a v-if="s.isPoint == 0" href="javascript:;" style="cursor: auto;">考点</a>
            </div>
          </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import contSidebar from '@/components/navSidebar.vue'
export default {
  data () {
    return {
      schoolList: [
      ],
      areaName: '',
      list: [],
      allSchool: [],
      search: '',
      activeItem: 1
    }
  },
  methods: {
    handleAcitve (obj) {
      this.activeItem = obj.id
      this.areaName = obj.name
      for (let i = 0; i < this.allSchool.length; i++) {
        if (this.allSchool[i].id === this.activeItem) {
          this.schoolList = this.allSchool[i].child
        }
      }
      console.log(this.allSchool, this.schoolList)
    },
    async initData () {
      // 获取区域信息
      let res = await this.$http.getArea()
      if (res.code === 20000) {
        let obj = res.data.child
        this.allSchool = res.data.child
        this.list = []
        obj.map(item => {
          this.list.push({
            id: item.id,
            name: item.areaName
          })
        })
        this.areaName = this.list[0].areaName
        this.activeItem = this.list[0].id
        this.schoolList = res.data.child[0].child
        console.log('obj', this.list)
      } else {
        this.$message.error(res.msg)
      }
    },
    async searchResult () {
      let res = await this.$http.searchSchool({
        id: this.activeItem,
        search: this.search
      })
      if (res.code === 20000) {
        this.schoolList = res.data
      } else {
        this.$message.error(res.msg)
      }
    }
  },
  mounted () {
    this.initData()
  },
  components: {
    contSidebar
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.container
  margin-left: 190px;
  width: calc(100% - 240px);
  .info-search
    width 100%
    height 56px
    line-height 56px
    input
      width 40%
  .school-container
    width calc(100% - 23px)
    height 50px
    margin-top 40px
    background color
    line-height 50px
    padding-left 24px
    color #fff
    p
      .operation
        float right
        margin-top 0px
        margin-right 40px
        i
          cursor pointer
          font-size 18px
          margin-left 20px
  .school-list
    width calc(100% - 54px)
    background background
    padding 28px
    .item
      background #fff
      width 128px
      height 92px
      margin 0 auto 30px
      border-radius 4px
      border 1px solid #ccc
      position relative
      p
        margin-top 18px
        padding-left 18px
        font-size 12px
        padding-right 14px
      a
        position absolute
        width 44px
        height 20px
        text-align center
        background #f9faff
        border 1px solid color
        border-radius 10px
        font-size 12px
        text-decoration none
        line-height 20px
        left 18px
        bottom 10px
        color color
  .search-input
    font-size 12px
</style>
